<template>
  <!-- <from> -->
  <div>
    <div class="logo">
      <img
        src="https://assets.maizuo.com/h5/mz-auth/public/app/img/logo.19ca0be.png"
        alt=""
      />
    </div>

    <div class="zc">
      <!-- <h1>注册</h1> -->
      <div class="phone">
        <!-- <span>输入手机号:</span> -->
        <input type="text" ref="mobile" v-model="mobile" placeholder="使用手机号注册" maxlength="11"/>
        <div class="error1" ref="error1">请输入手机号!</div>
        <div class="error2" ref="error2">请输入正确的手机号码</div>
      </div>
      <br />
      <div class="pass">
        <!-- <span>设置密码:</span> -->
        <input type="password" ref="password" v-model="password" placeholder="密码字符不能低于6位"/>
        <div class="error3" ref="error3">请输入6-12位的密码!</div>
        <div class="error4" ref="error4">请输入密码!</div>
      </div>
    </div>
    <div class="btn">
      <!-- <button @click="dianjizhuce">点击注册</button> -->
      <span @click="dianjizhuce">点击注册</span>
    </div>
  </div>

  <!-- </from> -->
</template>

<script>
import axios from "axios";
export default {
  //组件名字
  name: "zc",
  //接收父组件给的东西 type是接收什么东西  default 默认值
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    color: {
      type: String,
      default: "#000",
    },
  },
  //组件注册
  components: {},
  // vue数据集中管理
  data() {
    return {
      value: "",
      mobile: "",
      password: "",
      mobilereg: false,
      passwordreg: false,
    };
  },
  //方法 函数写这里
  methods: {
    dianjizhuce() {
      // 作业1 这儿要用if else 验证手机号密码 不能为空 格式最好也验证一下 然后再往后走 要不给提示 不行 然后return
      //作业2 样式写漂亮   原生写 可自定义漂亮 不用每一个人都一样！
      console.log("进入点击注册了");
      if (this.mobilereg && this.passwordreg) {
        console.log(this.mobile, this.password);

        axios
          .post("http://127.0.0.1:6800/zhuce", {
            mobile: this.mobile,
            password: this.password,
          })
          .then((data) => {
            console.log(data);
            if (data.data.code == "200") {
              this.$message({
                message: data.data.info2,
                type: "success",
              });
              this.$router.push("/dl");
            } else {
              this.$message({
                message: "警告哦，注册可能有点问题o ",
                type: "warning",
              });
            }
          });
      }
    },
  },
  //计算属性
  computed: {},
  //侦听器
  watch: {},
  //过滤器
  filters: {
    toUpcase(value) {
      return value ? value.toUpperCase() : "";
    },
  },
  //以下是生命周期
  //组件创建之前
  beforeCreate() {},
  //组件创建之后
  created() {
    // this.$nextTick(()=>{
    // this.eventBus.$emit("footernav", false);

    // })
    setTimeout(()=>{
    this.eventBus.$emit("footernav", false);

    },0)
  },
  //页面渲染之前
  beforeMount() {},
  //页面渲染之后
  mounted() {
    this.$refs.mobile.addEventListener("blur", () => {
      this.mobilereg = false;
      this.$refs.error1.style.display = "none";
      this.$refs.error2.style.display = "none";
      let value = this.$refs.mobile.value;
      let reg = /^1[3-9]\d{9}$/;
      if (value == "") {
        this.$refs.error1.style.display = "block";
      } else if (!reg.test(value)) {
        this.$refs.error2.style.display = "block";
      } else {
        this.mobilereg = true;
        this.mobile = value;
        console.log(this.moblie);
      }
    });
    this.$refs.password.addEventListener("blur", () => {
      this.passwordreg = false;
      this.$refs.error3.style.display = "none";
      this.$refs.error4.style.display = "none";
      let value = this.$refs.password.value;
      console.log(this.$refs.password.value);
      if (value == "") {
        this.$refs.error4.style.display = "block";
      } else if (value.length < 6) {
        this.$refs.error3.style.display = "block";
      } else {
        this.passwordreg = true;
        this.password = value;
        console.log(this.password);
      }
    });
  },
  //页面销毁之前
  beforeDestroy() {
    this.eventBus.$emit("footernav", true);
  },
  //页面销毁之后
  destroyed() {
    
  },
  //页面视图数据更新之前
  beforeUpdate() {},
  //页面视图数据更新之后
  updated() {},
  //组件路由守卫enter
  beforeRouteEnter(to, from, next) {
    next((vm) => {});
    // 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例
  },
  //组件路由守卫update更新
  beforeRouteUpdate(to, from, next) {
    // 同一页面，刷新不同数据时调用，
    next();
  },
  //组件路由守卫离开
  beforeRouteLeave(to, from, next) {
    // 离开当前路由页面时调用
    next();
  },
};
</script>

<style lang="scss" scoped>
.logo {
  height: 60px;

  display: flex;
  margin: 80px auto;

  justify-content: center;
  img {
    width: 60px;
    height: 60px;
  }
}
.zc {
  display: flex;
  flex-direction: column;

  align-items: center;
}
.phone input,
.pass input {
  font-size: 15px;
  height: 44px;
  width: 300px;
  background: #f4f4f4;
  border-bottom: 1px solid gray;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  
}
.btn {
  line-height: 45px;
  font-size: 16px;
  margin: 70px 25px 0;
  border-radius: 3px;
  text-align: center;
  background-color: #ff5f16;
  height: 44px;
  color: #fff;
}
.error1,
.error2,
.error3,
.error4 {
  text-align: left;
  color: rgb(241, 67, 67);
  font-size: 13px;
//   margin-left: 40px;
  display: none;
}
</style>
